<template>
  <view class="container">
    <!-- 返回按钮 -->
    <view class="nav" @tap="goBack">
      <image :src="$xyfun.image('/static/arrow-left.png')" class="back-icon"></image>
    </view>

    <!-- 温度显示 -->
    <view class="temperature-display">
      <view class="temperature-circle">
        <text class="temperature-value">{{ temperature }}</text>
        <text class="temperature-unit">°C</text>
      </view>
    </view>

    <!-- 温度调节 -->
    <view class="temperature-control">
      <view class="temperature-btn left" @click="decreaseTemperature">-</view>
      <text class="temperature-label">温度</text>
      <view class="temperature-btn right" @click="increaseTemperature">+</view>
    </view>

    <!-- 操作按钮 -->
    <view class="actions">
      <view class="action-button" v-for="(item, index) in buttons" :key="index" @click="handleButtonClick(index)">
        <image v-if="item.speed"
          :src="item.state 
            ? $xyfun.image(`/static/icon/${item.name}${item.speed}-on.png`) 
            : $xyfun.image(`/static/icon/${item.name}${item.speed}.png`)"
          class="action-icon">
        </image>
        <image v-else
          :src="item.state 
            ? $xyfun.image(`/static/icon/${item.name}-on.png`) 
            : $xyfun.image(`/static/icon/${item.name}.png`)"
          class="action-icon">
        </image>
        <text class="action-label">{{ item.speed ? item.speed : '' }}{{ item.label }}</text>
      </view>
    </view>
  </view>
</template>


<script>
	export default {
		data() {
			return {
				switch: 'off', // 开关 开on 关off
				fan: 1, // 风速
				mode: 'auto', // 模式 auto: 自动 cool: 制冷 dry: 除湿 fan: 送风 heat: 制热
				temperature: 16, // 初始温度
				buttons: [{
						name: 'switch',
						label: '开关',
						icon: '/static/icon/switch.png',
						state: false // False means '关', True means '开'
					},
					{
						label: '档风速',
						icon: '/static/icon/fan-speed1.png',
						state: false,
						name: 'fan-speed',
						speed: 1 // Initial speed
					},
					{
						label: '自动',
						icon: '/static/icon/auto.png',
						state: false,
						name: 'auto'
					},
					{
						label: '制冷',
						icon: '/static/icon/cool.png',
						state: false,
						name: 'cool'
					},
					{
						label: '除湿',
						icon: '/static/icon/dry.png',
						state: false,
						name: 'dry'
					},
					{
						label: '送风',
						icon: '/static/icon/fan.png',
						state: false,
						name: 'fan'
					},
					{
						label: '制热',
						icon: '/static/icon/heat.png',
						state: false,
						name: 'heat'
					}
				]
			};
		},
		methods: {
			goBack() {
				uni.navigateBack(); // 返回上一页
			},
			increaseTemperature() {
				if (this.temperature < 30) this.temperature += 1; // 最大温度30°C
				this.setting();
			},
			decreaseTemperature() {
				if (this.temperature > 16) this.temperature -= 1; // 最小温度16°C
				this.setting();
			},
			handleButtonClick(index) {
				console.log(`Button ${index} clicked: ${this.buttons[index].label}`);
				const button = this.buttons[index];

				// Toggle the state of the clicked button
				button.state = !button.state;
				// Update the icon based on the button's state
				button.icon = button.state ?
					`/static/icon/${button.name}-on.png` :
					`/static/icon/${button.name}.png`;

				// If the mode is being toggled, update the mode property
				if (button.name !== 'switch' && button.name !== 'fan-speed') {
					this.mode = button.name;
				}

				// Reset other modes to 'off'
				this.buttons.forEach(b => {
					if (b.name !== button.name) {
						b.state = false;
						b.icon = `/static/icon/${b.name}.png`;
					}
				});

				// Adjust fan speed or switch based on button name
				if (button.name === 'fan-speed') {
					this.adjustFanSpeed(button.speed);
				} else if (button.name === 'switch') {
					this.switch = button.state ? 'on' : 'off';
				}

				// Send the data to the backend
				this.setting();
			},
			adjustFanSpeed(speed) {
				// Cycle through the fan speeds: 1, 2, 3
				this.fan = this.fan === 3 ? 1 : this.fan + 1;
				
				// Update the button icon for the new fan speed
				this.buttons.find(b => b.name === 'fan-speed').state = true;
				this.buttons.find(b => b.name === 'fan-speed').speed = this.fan;
				this.buttons.find(b => b.name === 'fan-speed').icon = `/static/icon/fan-speed${this.fan}.png`;
			},
			setting() {
				this.$api.post({
					url: '/common/ctrlAir',
					loadingTip: '加载中...',
					data: {
						machine_id:'4A13E4F97975',
						switch: this.switch, // 开关
						fan: this.fan, // 风速
						mode: this.mode, // 模式
						temperature: this.temperature, // 初始温度
					},
					success: res => {
						console.log(res);
						uni.showToast({
							title: '设置成功'
						});
					}
				});
			}
		}
	};
</script>

<style scoped>
	/* 全局容器 */
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		height: 100vh;
		background-color: #000;
		color: #fff;
	}

	/* 返回按钮 */
	.nav {
		position: absolute;
		top: 20px;
		left: 20px;
	}

	.back-icon {
		width: 25px;
		height: 25px;
	}

	/* 温度显示 */
	.temperature-display {
		margin-top: 50px;
	}

	.temperature-circle {
		width: 378rpx;
		height: 378rpx;
		background-color: #A3DD77;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	.temperature-value {
		font-size: 48px;
		color: #fff;
		font-weight: bold;
	}

	.temperature-unit {
		font-size: 20px;
		color: #fff;
		position: absolute;
		top: 70px;
		right: 45px;
	}

	/* 温度调节 */
	.temperature-control {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 80%;
		background-color: #A3DD77;
		border-radius: 42rpx;
	}

	.temperature-btn {
		width: 50px;
		height: 50px;
		color: #fff;
		border: none;
		font-size: 24px;
		margin-left: 59rpx;
		margin-right: 59rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.temperature-btn.left {
		margin-left: 0;
	}

	.temperature-btn.right {
		margin-right: 0;
	}

	.temperature-label {
		color: #fff;
		font-size: 18px;
	}

	/* 操作按钮 */
	.actions {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 20px;
		width: 90%;
		margin-top: 10px;
	}

	.action-button {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.action-icon {
		width: 50px;
		height: 50px;
		margin-bottom: 10px;
	}

	.action-label {
		color: #fff;
		font-size: 14px;
	}
</style>